<script>
//客户动态
// 顶部tab+页面切换
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'WeworkQr'
})
</script>
<script setup>
import { Clock } from '@element-plus/icons-vue'
import {formatDate} from '@/utils'
import { reqClientList,reqClientDynamics } from '@/api'
import { customerDataList,customerConstanDynamic } from '@/data'
import { deepClone, isEmpty, customerStatus } from '@/utils'
import MyIcon from '@/components/my-icon/index.vue'
import { toRaw } from '@vue/reactivity';
import { ref } from 'vue'
const props = defineProps({
  form: {
    type: Object,
    default: {},
  },
})
const isRefresh = ref(false)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}


const total = ref(0)
const pageNo = ref(1)
const queryForm = ref({
  qrId: ''
})

const tableData = ref()
const activities = ref()
const getData = async(obj)=>{
	let queryForm = {
		page:pageNo.value,
		size:10
	}
	if(obj) {
		queryForm.page = 1
		queryForm = Object.assign(queryForm,toRaw(obj))
	}
	const r = await reqClientDynamics({
    external_userid:props.form.external_userid,
  })
	if (r){
    var act = []
    r.data.forEach(item=>{
      // if()
      if (act[item.orders-1]==undefined){

        act[item.orders-1] = {
          date:item.times,
          timeList:[item]
        }
      }else{
        act[item.orders-1].timeList.push(item)
      }

    })
    activities.value = act
    
    handleRefresh()
  }

}
getData()

const multipleTableRef = ref()
const multipleSelection = ref([])
const selectAll = ref(false)


const exportExcel = () => {
  console.log('导出excel')
}
const handleCurrentChange = (val) => {
  pageNo.value = val
  getData()
}
const handleSelectAll = () => {
  multipleTableRef.value.clearSelection()
  if (selectAll.value) {
    tableData.value.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  }
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
  if (multipleSelection.value.length == qrDataSetList.value.length) {
    selectAll.value = true
  } else {
    selectAll.value = false
  }
}
const emits = defineEmits(['showDetail'])
defineExpose({
  getData
});
</script>
<template>
<div v-if="isRefresh">
  <div class="a-mt20 a-p2016 app-container-radius">
  <div v-for="(act, idx) in activities"
      :key="idx">
    <div class="dy-date">{{act.date}}</div>
     <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in act.timeList"
      size="large"
      placement="top"
      :key="index"
      :icon="Clock"
      :timestamp="activity.time"
    >
    
     <el-card style="width:330px;padding:0px">
        <h4 style="margin-bottom:12px">{{customerConstanDynamic[(activity.type)+1+''].name}}</h4>
        <p style="font-size:12px" class="app-flex-left dy-font">员工<el-avatar class="app-gap-words-left-s cho-margin" shape="square" :size="30" :src="activity.staff_avatar" />
        <span style="font-size:12px" class="app-gap-words-left-s dy-font">{{activity.staff_name
}}</span><span v-if="activity.content"  class="app-gap-words-left-s app-words-tip-weak" style="font-size:12px;max-width:160px;">{{activity.content}}</span></p>
      </el-card>

    </el-timeline-item>
  </el-timeline>
  </div>
   
  </div>
  </div>
</template>
<style lang="scss">
@import url('../../../../../style/app-component.scss');
@import '../../../../../style/mixin.scss';
.dy-date{
      margin: 0 0 20px 40px;
      font-size: 14px;
font-family: PingFang-SC-Semibold, PingFang-SC;
font-weight: 600;
color: #343A3E;
}
.dy-font{
  font-size: 14px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #000000;
}
.el-card__body{
  padding: 16px 20px;
}
</style>